import React from 'react';
import { Image } from 'antd';
import { count } from '@/utils/count';
import style from './MvItem.module.css';

export default function MvItem({ id, cover, name, artistName, playCount, width, height }) {
  return (
    <div className={style.mvItem}>
      <section className={style.imgContainer}>
        {/* mv封面 */}
        <Image className={style.antImg} src={cover} width={width} height={height} preview={false} />
        {/* 播放次数 */}
        <div className={style.countContainer}>
          <span className='iconfont icon-video'></span>
          <span className={style.count}>{count(playCount)}</span>
        </div>
        {/* 播放图标 */}
        <span className={`iconfont icon-bofang ${style.icon}`}></span>
      </section>
      {/* mv的标题 */}
      <span className={style.name}>{name}</span>
      <div className={style.artistName} >{artistName}</div>
    </div>
  )
}
